<template>
    <div class="good">
      <img :src=good.pic @click="toDetail(good.id)">
      <div class="good-b">
        <div class="c-price">
          <span class="symbol">￥</span>
          <span class="price">{{good.price}}</span>
          <span class="old-price">月销{{good.sales}}笔</span>
        </div>
        <h6 class="title">{{good.name}}</h6>
        <div class="c-des">{{good.des}}</div>
        <svg class="cart" aria-hidden="true" @click="add(good)">
          <use xlink:href="#icon-sy_gwc"></use>
        </svg>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'slideGoodItem',

    data () {
      return {};
    },
    props: {
      good: {
        type: Object
      },
      region: {
        type: String
      }
    },
    created () {
    },
    methods: {
      add(good) {
        this.$store.commit('goodAttr', good);
        this.$store.commit('showAttr', true);
        this.$store.commit('region', this.region);
      },
      toDetail(id) {
        this.$store.commit('region', this.region);
        this.$router.push(
          {
            name: 'good-detail',
            query: {
              id: id,
              region: this.region
            }
          });
      }
    },
    computed: {},
    watch: {}
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .good
    overflow hidden
    border-radius vw(10)
    margin-right vw(10)
    border 1px solid #d7d7d7
    position relative
    box-sizing border-box
    flex 0 0 vw(200)
    img
      width vw(200)
      height vw(200)
    .good-b
      padding vw(15)
      position relative
      .c-price
        color main-color
        height vw(30)
        line-height vw(30)
        font-size vw(12)
        .price
          font-size vw(18)
          margin-left vw(-2)
        .old-price
          font-size vw(10)
          color #999
          margin-left vw(10)
      .title
        font-size vw(12)
        color #333
        height vw(20)
        line-height vw(20)
      .c-des
        font-size vw(10)
        color #999
      .cart
        width vw(15)
        height vw(15)
        fill #999
        position absolute
        right vw(15)
        bottom vw(20)
</style>
